<template>
  <div class="flex " style="flex-wrap: wrap;width: 100%;height: 100%;">
    <div class="list-box" v-for="(item, index) in lists" :key="index" style="flex-wrap: wrap;">
      <div class="list-box-1">
        <div class="flex list-box-1-1">
          <div style="margin-top: 17px;">
            <img :src="item.imgUrl" style="width: 91px;height: 65px;" />
          </div>
          <div class="flex text-0" style="flex-direction:column;padding-left: 10px;padding-right:10px;">
            <span style="font-size: 18px;font-weight: 500;">{{item.name}}</span>
            <span>编码：{{item.number}}</span>
            <span>温度：{{item.temperature}}</span>
            <span>模式：{{item.mode}}</span>
            <span>风速：{{item.wspeed}}</span>
          </div>
        </div>
        <div class="flex" style="justify-content: space-between;;padding: 10px;">
          <div class="flex" style="display: flex;
          justify-content: center;
          align-items: center;">
            <span :class="[item.online?'online-0':'online-1']" class="online-radius" /><span
              :style="{color:item.online?'#40E361':'#F44343'}" style="margin-left:5px">{{item.online?"在线":"离线"}}</span>
          </div>
          <div class="flex">
            <el-switch v-model="item.isOpen" active-color="#2A7BFF" inactive-color="#848C98">
            </el-switch>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import GridManageApi from "@/api/grid-manage";
  export default {
    data() {
      return {
        lists: [{
          imgUrl: require("@/assets/remote-control/img-0.png"),
          name: "401办公室空调1",
          number: "SMR378044",
          temperature: "25.8°C",
          mode: "送风",
          wspeed: "低速",
          online: true,
          isOpen: true
        }, {
          imgUrl: require("@/assets/remote-control/img-0.png"),
          name: "401办公室空调1",
          number: "SMR378044",
          temperature: "25.8°C",
          mode: "送风",
          wspeed: "低速",
          online: false,
          isOpen: false
        }, {
          imgUrl: require("@/assets/remote-control/img-0.png"),
          name: "401办公室空调1",
          number: "SMR378044",
          temperature: "25.8°C",
          mode: "送风",
          wspeed: "低速",
          online: false,
          isOpen: false
        }, {
          imgUrl: require("@/assets/remote-control/img-0.png"),
          name: "401办公室空调1",
          number: "SMR378044",
          temperature: "25.8°C",
          mode: "送风",
          wspeed: "低速",
          online: false,
          isOpen: false
        }, {
          imgUrl: require("@/assets/remote-control/img-0.png"),
          name: "401办公室空调1",
          number: "SMR378044",
          temperature: "25.8°C",
          mode: "送风",
          wspeed: "低速",
          online: false,
          isOpen: false
        }, {
          imgUrl: require("@/assets/remote-control/img-0.png"),
          name: "401办公室空调1",
          number: "SMR378044",
          temperature: "25.8°C",
          mode: "送风",
          wspeed: "低速",
          online: false,
          isOpen: false
        }, {
          imgUrl: require("@/assets/remote-control/img-0.png"),
          name: "401办公室空调1",
          number: "SMR378044",
          temperature: "25.8°C",
          mode: "送风",
          wspeed: "低速",
          online: false,
          isOpen: false
        }, {
          imgUrl: require("@/assets/remote-control/img-0.png"),
          name: "401办公室空调1",
          number: "SMR378044",
          temperature: "25.8°C",
          mode: "送风",
          wspeed: "低速",
          online: false,
          isOpen: false
        }, {
          imgUrl: require("@/assets/remote-control/img-0.png"),
          name: "401办公室空调1",
          number: "SMR378044",
          temperature: "25.8°C",
          mode: "送风",
          wspeed: "低速",
          online: false,
          isOpen: false
        }, {
          imgUrl: require("@/assets/remote-control/img-0.png"),
          name: "401办公室空调1",
          number: "SMR378044",
          temperature: "25.8°C",
          mode: "送风",
          wspeed: "低速",
          online: false,
          isOpen: false
        }, {
          imgUrl: require("@/assets/remote-control/img-0.png"),
          name: "401办公室空调1",
          number: "SMR378044",
          temperature: "25.8°C",
          mode: "送风",
          wspeed: "低速",
          online: false,
          isOpen: false
        }, {
          imgUrl: require("@/assets/remote-control/img-0.png"),
          name: "401办公室空调1",
          number: "SMR378044",
          temperature: "25.8°C",
          mode: "送风",
          wspeed: "低速",
          online: false,
          isOpen: false
        }, {
          imgUrl: require("@/assets/remote-control/img-0.png"),
          name: "401办公室空调1",
          number: "SMR378044",
          temperature: "25.8°C",
          mode: "送风",
          wspeed: "低速",
          online: false,
          isOpen: false
        }, {
          imgUrl: require("@/assets/remote-control/img-0.png"),
          name: "401办公室空调1",
          number: "SMR378044",
          temperature: "25.8°C",
          mode: "送风",
          wspeed: "低速",
          online: false,
          isOpen: false
        }, {
          imgUrl: require("@/assets/remote-control/img-0.png"),
          name: "401办公室空调1",
          number: "SMR378044",
          temperature: "25.8°C",
          mode: "送风",
          wspeed: "低速",
          online: false,
          isOpen: false
        }, {
          imgUrl: require("@/assets/remote-control/img-0.png"),
          name: "401办公室空调1",
          number: "SMR378044",
          temperature: "25.8°C",
          mode: "送风",
          wspeed: "低速",
          online: false,
          isOpen: false
        }, {
          imgUrl: require("@/assets/remote-control/img-0.png"),
          name: "401办公室空调1",
          number: "SMR378044",
          temperature: "25.8°C",
          mode: "送风",
          wspeed: "低速",
          online: false,
          isOpen: false
        }, {
          imgUrl: require("@/assets/remote-control/img-0.png"),
          name: "401办公室空调1",
          number: "SMR378044",
          temperature: "25.8°C",
          mode: "送风",
          wspeed: "低速",
          online: false,
          isOpen: false
        }]
      };
    },
    mounted() {
    },
    methods: {
      toReset() {
        this.searchModel = {};
        this.$refs.elTable.clearSort();
        this.$refs.elTable.clearFilter();
        this.toSearch();
      },

    },
  };
</script>
<style lang="scss" scoped>
  .flex {
    display: flex;

  }

  .list-box {
    opacity: 1;
    background: #FFFFFF;
    opacity: 1;
    font-family: Source Han Sans CN;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0em;
    padding: 8px;
    color: #272C33;
  }

  .list-box-1 {
    border-radius: 2px;
    box-sizing: border-box;
    border: 1px solid #DAE1E8;
    box-shadow: 2px 0 10px 2px #ebebeb;

  }

  .list-box-1-1 {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid #DAE1E8;
  }

  .text-0>>>span {
    font-family: Source Han Sans CN;
    font-weight: normal;
    letter-spacing: 0em;
    width: 185px;
    line-height: 28px;
    margin-top: 8px;
  }

  .online-radius {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  .online-0 {
    background: #40E361;
  }

  .online-1 {
    background: #F44343;
  }
</style>